<template>
  <div>
    <div>
      <el-input
        style="width: 300px"
        placeholder="请输入房间号查找"
        suffix-icon="el-icon-search"
        v-model="queryParams.roomNo"
      >
      </el-input>
      <el-button type="primary" style="margin: 10px 10px" @click="handlesearch"
        >查找</el-button
      >
      <el-button type="primary" style="margin: 10px 10px" @click="showaddView"
        >添加房间</el-button
      >
    </div>
    <div>
      <el-table
        ref="singleTable"
        :data="roomData"
        stripe
        height="350"
        border
        style="width: 80%"
        @selection-change="handleSelectionChange"
        highlight-current-row
        @current-change="handleClickChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="roomId" label="房间ID" width="180">
        </el-table-column>
        <el-table-column prop="roomNo" label="房间号" width="180">
        </el-table-column>
        <el-table-column prop="roomType.roomTypeName" label="房间类型">
        </el-table-column>
        <el-table-column prop="roomType.roomTypeNo" label="房型编号">
        </el-table-column>
        <el-table-column prop="roomState" label="房间状态"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              :disabled="flag"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              :disabled="flag"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 设置分页开始 -->
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 设置分页结束 -->
      <el-button
        type="danger"
        style="margin-top: 20px"
        :disabled="this.multipleSelection.length == 0 && this.flag == false"
        @click="batchdelete"
        >批量删除</el-button
      >
    </div>
    <el-dialog title="添加房间" :visible.sync="dialogaddVisible" width="30%">
      <el-form :rules="rules" ref="form" :model="form">
        <el-form-item style="margin-right: 10px" label="房间编号" prop="roomNo">
          <el-input v-model="form.roomNo" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item style="margin-right: 10px" label="房间状态" required>
          <el-select
            v-model="form.roomState"
            placeholder="请选择房间状态"
            @change="$forceUpdate()"
          >
            <el-option
              v-for="item in roomstateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-right: 10px" label="房间类型" required>
          <el-select v-model="form.roomTypeId" placeholder="请选择房型">
            <el-option
              v-for="item in roomtypeOptions"
              :key="item.roomTypeId"
              :label="item.roomTypeName"
              :value="item.roomTypeId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogaddVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="Addroom"
          @keydown.enter.native="Addroom"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="编辑房间" :visible.sync="dialogeditVisible" width="30%">
      <div>
        <el-tag style="margin-right: 10px">房型编号</el-tag>
        <el-input v-model="queryParams.roomNo" style="width: 250px"></el-input>
        <br />
        <el-tag style="margin-right: 10px">房间状态</el-tag>
        <el-select
          v-model="queryParams.roomState"
          placeholder="请选择房间状态"
          @change="$forceUpdate()"
        >
          <el-option
            v-for="item in roomstateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogeditVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="Updateroom"
          @keydown.enter.native="Updateroom"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRoomPage,
  editRoom,
  deleteRoom,
  addRoom,
  batchdelete,
  searchRoom
} from "../api/room";
import { listRoomtype } from "../api/roomtype";
export default {
  name: "Room",
  data() {
    return {
      rules: {
        roomNo: [
          { required: true, message: "请输入房型名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      flag: false,
      currentRow: null,
      //房间类型
      roomtypeOptions: undefined,
      //房间状态
      roomstateOptions: [
        {
          value: "打扫中",
          label: "打扫中"
        },
        {
          value: "空闲",
          label: "空闲"
        },
        {
          value: "已入住",
          label: "已入住"
        },
        {
          value: "待入住",
          label: "待入住"
        }
      ],
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 当前页
      pageNum: 0,
      // 每页数据量
      pageSize: 0,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        roomId: undefined,
        roomNo: undefined,
        roomTypeId: undefined,
        roomState: undefined
      },
      // 表格数据
      roomData: [],
      multipleSelection: [],
      //表单参数
      form: {
        roomNo: undefined,
        roomTypeId: undefined,
        roomState: undefined
      },
      dialogaddVisible: false,
      dialogeditVisible: false
    };
  },
  mounted() {
    this.checkuserInfo();
    this.initroomData();
    // 查询所有roomtype赋值roomtypeOptions
    listRoomtype()
      .then(response => {
        this.roomtypeOptions = response.data.data;
      })
      .catch(error => {
        // 错误分为 status-请求错误 和 code-账号密码错误
        this.$message.error(error);
        console.log(error);
      });
  },
  methods: {
    checkuserInfo() {
      if (this.$store.state.userName == "user") {
        this.flag = true;
        console.log(this.flag);
      } else if (this.$store.state.userName == "admin") {
        this.flag = false;
        console.log(this.flag);
      }
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.initroomData();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.initroomData();
    },

    resetform() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        roomId: undefined,
        roomNo: undefined,
        roomTypeName: undefined,
        roomState: undefined
      };
    },
    //查询房间
    handlesearch() {
      if (this.queryParams.roomNo != null) {
        searchRoom(this.queryParams.roomNo)
          .then(resp => {
            if (resp.data.code == "200") {
              this.$message({
                type: "success",
                message: "查询成功!"
              });
              console.log(resp.data);
            } else {
              this.$message({
                type: "info",
                message: "该房号不存在!"
              });
            }
            this.resetform();
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      } else {
        this.$message({
          type: "success",
          message: "房号列表已刷新!"
        });
      }
      this.initroomData();
    },
    //添加房间数据
    showaddView() {
      this.dialogaddVisible = true;
      this.resetform();
    },
    Addroom() {
      if (
        typeof this.form.roomNo === "undefined" ||
        typeof this.form.roomTypeId === "undefined" ||
        typeof this.form.roomState === "undefined"
      ) {
        this.$message.error("请输入完整房间信息！");
      } else {
        addRoom(this.form)
          .then(resp => {
            if (resp.data) {
              this.initroomData();
              console.log(resp.data);
              if (resp.data.code == "200") {
                this.$message.success(resp.data);
              } else {
                this.$message.error(resp.data);
              }
            }
            this.dialogaddVisible = false;
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      }
      this.resetform();
    },

    //修改房间数据
    handleEdit(row) {
      this.dialogeditVisible = true;
      Object.assign(this.queryParams, row);
    },
    Updateroom() {
      editRoom(this.queryParams)
        .then(resp => {
          if (resp) {
            if (resp.data.code == "200") {
              this.$message.success(resp.data);
            } else {
              this.$message.error(resp.data);
            }
          } else {
            this.$message({
              type: "info",
              message: "修改失败!"
            });
          }
          this.resetform();
          this.dialogeditVisible = false;
          this.initroomData();
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    //删除房间数据
    handleDelete(row) {
      this.$confirm('确定要删除"' + row.roomNo + '"房吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() =>
        deleteRoom(row.roomId)
          .then(resp => {
            if (resp.data.code == "200") {
              this.initroomData();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败!"
              });
            }
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          })
      );
    },
    //房间列表
    initroomData() {
      this.loading = true;
      listRoomPage(this.queryParams)
        .then(resp => {
          if (resp.data.code == "200") {
            this.roomData = resp.data.data.list;
            this.total = resp.data.data.total;
            this.pageNum = resp.data.data.pageNum;
            this.pageSize = resp.data.data.pageSize;
            this.loading = false;
            console.log(resp.data);
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
      this.loading = false;
    },
    //批量删除
    batchdelete() {
      this.$confirm(
        "确定要删除" + this.multipleSelection.length + "条数据吗?",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        var ids = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          //将选中数据的每个roomeId添加到ids中
          ids.push(this.multipleSelection[i].roomId);
        }
        batchdelete(ids)
          .then(resp => {
            if (resp.data.code == "200") {
              this.initroomData();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败!"
              });
            }
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleClickChange(val) {
      this.currentRow = val;
    }
  }
};
</script>
<style></style>
